import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import './index.css'
import { Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useRootNodeStore } from '~src/store/useRootNodeStore';
import { MODEL_OPTIONS } from '~src/constant';

const items: MenuProps['items'] = MODEL_OPTIONS.map(({ key, name, description }) => ({
    key: key,
    label: (
        <div className='flex justify-start items-center cursor-pointer pl-[6px] pr-[5px] py-[6px] leading-4 rounded-3xl gap-[2px]'>
            <div className="icon flex justify-start items-center rounded-full h-4 w-4 ml-[1px] mr-[2px]">
                <div
                    style={{ width: '14px', height: '14px' }}
                    className="flex items-center justify-center rounded-full"
                >
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#19C37D"></circle><path d="M13.1351 6.91143C13.4073 6.09431 13.3136 5.19918 12.8782 4.45593C12.2235 3.31593 10.9072 2.72943 9.6217 3.00543C9.04983 2.36118 8.2282 1.99481 7.36683 2.00006C6.05283 1.99706 4.88695 2.84306 4.4827 4.09331C3.63858 4.26618 2.90995 4.79456 2.48358 5.54343C1.82395 6.68043 1.97433 8.11368 2.85558 9.08868C2.58333 9.9058 2.67708 10.8009 3.11245 11.5442C3.7672 12.6842 5.08345 13.2707 6.36895 12.9947C6.94045 13.6389 7.76245 14.0053 8.62383 13.9997C9.93858 14.0031 11.1048 13.1563 11.5091 11.9049C12.3532 11.7321 13.0818 11.2037 13.5082 10.4548C14.1671 9.3178 14.0163 7.88568 13.1355 6.91068L13.1351 6.91143ZM8.62458 13.2156C8.09845 13.2163 7.58883 13.0322 7.18495 12.6951C7.20333 12.6853 7.2352 12.6677 7.25583 12.6549L9.64533 11.2749C9.76758 11.2056 9.84258 11.0754 9.84183 10.9348V7.56618L10.8517 8.1493C10.8626 8.15455 10.8697 8.16505 10.8712 8.17705V10.9667C10.8697 12.2072 9.86508 13.2129 8.62458 13.2156ZM3.79308 11.1519C3.52945 10.6967 3.43458 10.1631 3.52495 9.64518C3.54258 9.65568 3.5737 9.6748 3.59583 9.68755L5.98533 11.0676C6.10645 11.1384 6.25645 11.1384 6.37795 11.0676L9.29508 9.38305V10.5493C9.29583 10.5613 9.2902 10.5729 9.28083 10.5804L6.86545 11.9751C5.78958 12.5946 4.41558 12.2263 3.79345 11.1519H3.79308ZM3.1642 5.93606C3.4267 5.48006 3.84108 5.13131 4.33458 4.95018C4.33458 4.97081 4.33345 5.00718 4.33345 5.03268V7.79305C4.3327 7.9333 4.4077 8.06343 4.52958 8.1328L7.4467 9.81693L6.43683 10.4001C6.4267 10.4068 6.41395 10.4079 6.4027 10.4031L3.98695 9.0073C2.91333 8.38555 2.54508 7.01193 3.16383 5.93643L3.1642 5.93606ZM11.4615 7.86693L8.54433 6.18243L9.5542 5.59968C9.56433 5.59293 9.57708 5.59181 9.58833 5.59668L12.0041 6.9913C13.0796 7.61268 13.4482 8.98855 12.8268 10.0641C12.564 10.5193 12.15 10.8681 11.6568 11.0496V8.20668C11.658 8.06643 11.5833 7.93668 11.4618 7.86693H11.4615ZM12.4665 6.35418C12.4488 6.34331 12.4177 6.32456 12.3956 6.31181L10.0061 4.93181C9.88495 4.86093 9.73495 4.86093 9.61345 4.93181L6.69633 6.6163V5.45006C6.69558 5.43806 6.7012 5.42643 6.71058 5.41893L9.12595 4.02543C10.2018 3.40481 11.5773 3.77418 12.1976 4.85043C12.4597 5.30493 12.5546 5.83706 12.4657 6.35418H12.4665ZM6.14733 8.4328L5.13708 7.84968C5.1262 7.84443 5.11908 7.83393 5.11758 7.82193V5.03231C5.11833 3.79031 6.12595 2.78381 7.36795 2.78456C7.89333 2.78456 8.40183 2.96906 8.8057 3.30506C8.78733 3.31481 8.75583 3.33243 8.73483 3.34518L6.34533 4.72518C6.22308 4.79456 6.14808 4.92431 6.14883 5.06493L6.14733 8.43205V8.4328ZM6.69595 7.25005L7.99533 6.49968L9.2947 7.24968V8.75005L7.99533 9.50005L6.69595 8.75005V7.25005Z" fill="white"></path></svg>
                </div>
            </div>
            <span className="inline-block text-[13px] text-ellipsis whitespace-nowrap overflow-hidden max-w-full">{name}</span>
        </div>
    ),
}));



const ModelSelectButton = ({ model, onChange }) => {
    const menuClick: MenuProps['onClick'] = ({ key }) => {
        const model = MODEL_OPTIONS.find(({ key: k }) => k === key)
        onChange(model)
    };
    const rootNode = useRootNodeStore(state => state.rootNode)
    return (<Dropdown
        getPopupContainer={() => rootNode!}
        trigger={['click']} menu={{
            items,
            onClick: menuClick,
        }} placement="bottom">
        <div
            style={{ color: 'var(--opengpts-sidebar-model-btn-color)' }}
            className=' box-border bg-[var(--opengpts-sidebar-model-btn-bg-color)] model-btn   flex justify-center items-center cursor-pointer pl-[6px] pr-[5px] py-[6px] leading-4 rounded-3xl gap-[2px]'>
            <div className="icon flex justify-center items-center rounded-full h-4 w-4 ml-[1px] mr-[2px]">
                <div
                    style={{ width: '14px', height: '14px' }}
                    className="flex items-center justify-center rounded-full"
                >
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#19C37D"></circle><path d="M13.1351 6.91143C13.4073 6.09431 13.3136 5.19918 12.8782 4.45593C12.2235 3.31593 10.9072 2.72943 9.6217 3.00543C9.04983 2.36118 8.2282 1.99481 7.36683 2.00006C6.05283 1.99706 4.88695 2.84306 4.4827 4.09331C3.63858 4.26618 2.90995 4.79456 2.48358 5.54343C1.82395 6.68043 1.97433 8.11368 2.85558 9.08868C2.58333 9.9058 2.67708 10.8009 3.11245 11.5442C3.7672 12.6842 5.08345 13.2707 6.36895 12.9947C6.94045 13.6389 7.76245 14.0053 8.62383 13.9997C9.93858 14.0031 11.1048 13.1563 11.5091 11.9049C12.3532 11.7321 13.0818 11.2037 13.5082 10.4548C14.1671 9.3178 14.0163 7.88568 13.1355 6.91068L13.1351 6.91143ZM8.62458 13.2156C8.09845 13.2163 7.58883 13.0322 7.18495 12.6951C7.20333 12.6853 7.2352 12.6677 7.25583 12.6549L9.64533 11.2749C9.76758 11.2056 9.84258 11.0754 9.84183 10.9348V7.56618L10.8517 8.1493C10.8626 8.15455 10.8697 8.16505 10.8712 8.17705V10.9667C10.8697 12.2072 9.86508 13.2129 8.62458 13.2156ZM3.79308 11.1519C3.52945 10.6967 3.43458 10.1631 3.52495 9.64518C3.54258 9.65568 3.5737 9.6748 3.59583 9.68755L5.98533 11.0676C6.10645 11.1384 6.25645 11.1384 6.37795 11.0676L9.29508 9.38305V10.5493C9.29583 10.5613 9.2902 10.5729 9.28083 10.5804L6.86545 11.9751C5.78958 12.5946 4.41558 12.2263 3.79345 11.1519H3.79308ZM3.1642 5.93606C3.4267 5.48006 3.84108 5.13131 4.33458 4.95018C4.33458 4.97081 4.33345 5.00718 4.33345 5.03268V7.79305C4.3327 7.9333 4.4077 8.06343 4.52958 8.1328L7.4467 9.81693L6.43683 10.4001C6.4267 10.4068 6.41395 10.4079 6.4027 10.4031L3.98695 9.0073C2.91333 8.38555 2.54508 7.01193 3.16383 5.93643L3.1642 5.93606ZM11.4615 7.86693L8.54433 6.18243L9.5542 5.59968C9.56433 5.59293 9.57708 5.59181 9.58833 5.59668L12.0041 6.9913C13.0796 7.61268 13.4482 8.98855 12.8268 10.0641C12.564 10.5193 12.15 10.8681 11.6568 11.0496V8.20668C11.658 8.06643 11.5833 7.93668 11.4618 7.86693H11.4615ZM12.4665 6.35418C12.4488 6.34331 12.4177 6.32456 12.3956 6.31181L10.0061 4.93181C9.88495 4.86093 9.73495 4.86093 9.61345 4.93181L6.69633 6.6163V5.45006C6.69558 5.43806 6.7012 5.42643 6.71058 5.41893L9.12595 4.02543C10.2018 3.40481 11.5773 3.77418 12.1976 4.85043C12.4597 5.30493 12.5546 5.83706 12.4657 6.35418H12.4665ZM6.14733 8.4328L5.13708 7.84968C5.1262 7.84443 5.11908 7.83393 5.11758 7.82193V5.03231C5.11833 3.79031 6.12595 2.78381 7.36795 2.78456C7.89333 2.78456 8.40183 2.96906 8.8057 3.30506C8.78733 3.31481 8.75583 3.33243 8.73483 3.34518L6.34533 4.72518C6.22308 4.79456 6.14808 4.92431 6.14883 5.06493L6.14733 8.43205V8.4328ZM6.69595 7.25005L7.99533 6.49968L9.2947 7.24968V8.75005L7.99533 9.50005L6.69595 8.75005V7.25005Z" fill="white"></path></svg>
                </div>
            </div>
            <span className="  inline-block text-[13px] text-ellipsis whitespace-nowrap overflow-hidden max-w-full">{model.name}</span>
            <div className="flex items-center pl-[2px] pr-[2px]">
                <DownOutlined height={12} width={12} style={{ width: '12px', height: '12px' }} />
            </div>

        </div>
    </Dropdown>)



};

export default ModelSelectButton;